import { Component, PropType } from 'vue';

/**
 * 搜索的配置 option
 */
export interface SearchOptionsType {
  // 搜索框名称
  name: string;
  // 搜索框字段
  field: string;
  // 搜索框类型
  type:
    | 'input'
    | 'select'
    | 'datePicker'
    | 'cascader'
    | 'button'
    | 'radio'
    | 'filterTab'
    | 'headerTab'
    | 'sidebar'
    | 'custom';
  selectSubTitle?: string; // 当type=select时，想为option添加副标题时，option读取副标题的字段名
  dateType?: string; //当type=datePicker 必填 类型参考el-date-picker 的type
  // 占位文字
  placeholder?: string;
  // 占位文字 start 用于dataPicker
  startPlaceholder?: string;
  // 占位文字 end 用于dataPicker
  endPlaceholder?: string;
  // type为select/radio时必填，option列表
  fixedOption?: string;
  // type为select/radio/cascader时, 具体的option列表
  options?: LabelValueOptions[] | any[];
  // type为select/radio时并且选项列表需要从接口获取的
  loadData?: Fn<Promise<any>>;
  // uuid 用于异步获取的选项列表
  uuid?: string;
  // select等选中的v-model的取值字段
  valueField?: string;
  // 是否可以清空
  allowClear?: boolean;
  // 选择框字段，当type为input&select时必填
  // NOTE 增加全部选项，当selectField对应的表单值为null时即为选择到全部
  selectField?: string;
  // 选择框名称，用户type为input&select时
  selectName?: string;
  format?: string; // 当type=datePicker 才生效
  // type为select时，远程获取option列表
  remoteMethod?: (query: string) => Promise<any[]>;
  // 按钮的方法
  buttonMethod?: Fn;
  // 按钮的图标
  buttonIcon?: any;
  // 按钮的类型
  buttonType?: '' | 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info' | 'text';
  // type为select时，一些配置信息
  selectOption?: SelectOptionType;
  // 样式
  style?: string;
  // radio 数组
  radioArr?: any;
  // 头部tab
  headerTabList?: FilterTabItem[];
  // 筛选栏tab
  filterTabList?: FilterTabItem[];
  // 是否在展开按钮中
  isFold?: boolean;
  /**
   * 当选项改变时触发，如果有此项，则不会自动触发refresh
   * @param searchForm
   * @returns
   */
  onSearchFormChange?: (searchForm: any) => void;
  /**
   * 是否禁用
   */
  disabled?: boolean;
  /**
   * 搜索配置
   */
  filterable?: boolean;
  /**
   * 自定义组件
   */
  customItem?: Component;
}

interface FilterTabItem {
  label: string;
  value: string;
}

// type为select时，一些配置信息
export interface SelectOptionType {
  // 是否自适应宽度
  autoWidth: boolean;
  // 自适应宽度时初始宽度
  defaultAutoWidth?: number;
  // 自适应宽度时最大宽度
  maxAutoWidth?: number;
}

/**
 * search bar props type
 */
export interface CSearchBarProps {
  /**
   * 搜索的form
   */
  searchForm: any;
  /**
   * 搜索的配置
   */
  searchOptions: SearchOptionsType[];
  /**
   * 表格字段列表
   */
  tableFieldsSetting: any[];
  /**
   * 是否需要字段配置
   */
  enableFieldsSetting?: boolean;
  /**
   * 是否仅展示筛选栏tab
   */
  isSingleFilterTab?: boolean;
  /**
   * 是否展示刷新按钮
   */
  isShowRefreshBtn?: boolean;
  /**
   * 是否展示设置按钮
   */
  isShowSettingBtn?: boolean;
}

/**
 * search bar props
 */
export const searchBarProps = {
  /**
   * 搜索的form
   */
  searchForm: {
    type: Object as PropType<any>,
    default: () => {
      return {};
    }
  },
  /**
   * 搜索的配置
   */
  searchOptions: {
    type: Array as PropType<SearchOptionsType[]>,
    default: () => {
      return [];
    }
  },
  /**
   * 表格字段列表
   */
  tableFieldsSetting: {
    type: Array as PropType<any[]>,
    default: () => {
      return [];
    }
  },
  /**
   * 是否需要字段配置
   */
  enableFieldsSetting: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  /**
   * 是否仅展示筛选栏tab
   */
  isSingleFilterTab: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  /**
   * 是否展示刷新按钮
   */
  isShowRefreshBtn: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  /**
   * 是否展示设置按钮
   */
  isShowSettingBtn: {
    type: Boolean as PropType<boolean>,
    default: true
  }
};
